<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="header">
        <div class="headerinner">
            <div class="headerleft">
                <p><img src="../image/1.png" alt=""></p>
                <p>400-969-5930</p>
                <p><img src="../image/3.png" alt=""></p>
            </div>
            <div class="headerright">
                <p><img src="../image/2.png" alt=""></p>
                <p class="off ective"><a href="./login.html"> 登录 | 注册</a></p>
               <p class="on"> <span>您好</span><span class="username">前端小灰狼</span></p>
               <p class="exit">退出登录</p>
               <p class="list">商品列表</p>
               <p class="car">购物车</p>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
        <p><img src="https://ceair-resource.oss-cn-shanghai.aliyuncs.com/shoppingnew/mall/pc/img/logo.23ea94e1.png"
                alt=""></p>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">保险专区</a></li>
            <li><a href="#">充值缴费</a></li>
        </ul>
        <div class="select">
            <div class="selecttop">
                
                <input type="text">
                <button><span class="iconfont icon-sousuo two"></span></button>
                <ul></ul>
            </div>
            <div class="selectbottom">
                <span>iPhone</span>
                <span>戴森</span>
                <span>网易严选</span>
                <span>油卡</span>
                <span>夏日饮品</span>
                <span>东航周边</span>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner" id="box">
        <ul></ul>
        <ol></ol>
        <div>
            <p class="left">&lt;</p>
            <p class="right">&gt;</p>
        </div>
        <div class="menu">
            <p>全部商品分类</p>
            <ul class="menuul">
                <li>旅行清单</li>
                <li>东航好物</li>
                <li>手机</li>
                <li>数码</li>
                <li>电器</li>
                <li>电脑</li>
                <li>食品</li>
                <li>家居</li>
                <li>美妆</li>
                <li>箱包</li>
                <li>饰品</li>
                <li>母婴</li>
                <li>户外</li>
                <li>汽车</li>
                <li>生活服务</li>
            </ul>
        </div>
        <ol class="innerol">
            <li>
                <div>
                   <h3></h3>
                </div>
            </li>
            <li>东航好物</li>
            <li>手机</li>
            <li>数码</li>
            <li>电器</li>
            <li class="intive">电脑</li>
            <li>食品</li>
            <li>家居</li>
            <li>美妆</li>
            <li>箱包</li>
            <li>饰品</li>
            <li>母婴</li>
            <li>户外</li>
            <li>汽车</li>
            <li>生活服务</li>
        </ol>
    </div>
   <!-- 手机数码 -->
    <div id="block1" class="block">
        <div class="top">
            <div class="left">
                <p class="categoryIcon icon-categoryIcon1"></p>
                <p class="categoryTitle">手机数码</p>
            </div>
            <div class="hotWord">
                <p class="tit">热门</p>
                <ul>
                    <li><a href="javascript:;" name="1">Apple 苹果</a></li>
                    <li><a href="javascript:;" name="1">HUAWEI 华为</a></li>
                    <li><a href="javascript:;" name="1">MI 小米</a></li>
                    <li><a href="javascript:;" name="1">VIVO/OPPO</a></li>
                    <li><a href="javascript:;" name="1">Logitech 罗技</a></li>
                    <li><a href="javascript:;" name="1">耳机音响</a></li>
                    <li><a href="javascript:;" name="1">平板/电脑</a></li>
                    <li><a href="javascript:;" name="1">玩酷影像</a></li>
                    <li><a href="javascript:;" name="1">打印机</a></li>
                    <li><a href="javascript:;" name="1">查看更多&gt;&gt;</a></li>
                </ul>
            </div>
        </div>
        <div class="bottomContent">
            <div class="banner">
                <a href="">
                    <img src="https://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/7/29/5bc685d9dc7cd69f57e8d2983294ba7c.jpg" alt="">
                </a>
                <div class="bannerTitleContent">
                    <p class="mainTit">
                        <a href="">品质好货 智抢先机</a>
                    </p>
                    <p class="line"></p>
                    <p class="subTit">
                        <a href="">华为手机手表</a>
                    </p>
                </div>
            </div>
            <div class="productList">
                <ul name="ul1">
                    
                </ul>
            </div>
        </div>
    </div>
     <!-- 个人防护 -->
     <div id="block1" class="block">
        <div class="top">
            <div class="left">
                <p class="categoryIcon icon-categoryIcon2"></p>
                <p class="categoryTitle">美妆个护</p>
            </div>
            <div class="hotWord">
                <p class="tit">热门</p>
                <ul>
                    <li><a href="javascript:;" name="1">防晒隔离</a></li>
                    <li><a href="javascript:;" name="1">乳液面霜</a></li>
                    <li><a href="javascript:;" name="1">沐浴护肤</a></li>
                    <li><a href="javascript:;" name="1">口腔护理</a></li>
                    <li><a href="javascript:;" name="1">眼部护理</a></li>
                    <li><a href="javascript:;" name="1">手足护理</a></li>
                    <li><a href="javascript:;" name="1">香水</a></li>
                    <li><a href="javascript:;" name="1">面膜</a></li>
                    <li><a href="javascript:;" name="1">查看更多&gt;&gt;</a></li>
                </ul>
            </div>
        </div>
        <div class="bottomContent">
            <div class="banner">
                <a href="">
                    <img src="https://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/7/29/6b1100c2085715287e08a2647ee89250.jpg" alt="">
                </a>
                <div class="bannerTitleContent">
                    <p class="mainTit">
                        <a href="">感受美肌能量</a>
                    </p>
                    <p class="line"></p>
                    <p class="subTit">
                        <a href="">SK-II 玉兰油</a>
                    </p>
                </div>
            </div>
            <div class="productList">
                <ul name="ul">
                    
                </ul>
            </div>
        </div>
    </div>
  <div class="footer">
      <ul class="footerul">
          <p>会员须知</p>
          <li>会员权益说明</li>
          <li>商城现金消费奖积分</li>
      </ul>
      <ul class="footerul">
          <p>订购流程</p>
          <li>注册/登录</li>
          <li>开通消费密码</li>
          <li>搜索商品</li>
          <li>加入购物车</li>
          <li>支付</li>
          <li>查询订单及状态</li>
          <li>交通卡圈存流程</li>
      </ul>
      <ul class="footerul">
          <p>物流配送</p>
          <li>配送标准及范围</li>
          <li>配送方式</li>
          <li>签收须知</li>
      </ul>
      <ul class="footerul">
          <p>售后服务说明</p>
          <li>客服热线</li>
          <li>退换货政策</li>
          <li>退换货流程</li>
          <li> 商品保修</li>
          <li>发票</li>
      </ul>
      <ul class="footerul">
          <p>友情链接</p>
          <li>东方万里行</li>
          <li>东航网点信息</li>
      </ul>
      <ul class="footerul">
          <p>活动规则</p>
          <li>现金充话费享1:1积分奖励活动规则</li>
      </ul>

  </div>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/util.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/index.js"></script>
   
    <script>
         $('.banner> .menu > .menuul').on('mouseover', function () {
           $('.banner> .innerol').css('opacity',1)
     })
      $('.banner> .menu > .menuul>  li').on('mouseover', function () {
           $(this).addClass('encu').siblings().removeClass('encu')
           $('.banner> .innerol').css('opacity',1).children().removeClass('intive').eq($(this).index()).addClass('intive')
     })
     
      $('.banner> .menu > .menuul').on('mouseout', function () {
           $(this).children().removeClass('encu')
           $('.banner> .innerol').removeAttr("style")
     })
     // <!-- 动态生成页面 -->
$(function(){
    $.ajax({
        url:"../data/data1.json"
    }).then(function(res){
    render(res.data1);
})
function render(data1){  
    $('[name="ul"]').html(
       data1.map((item)=>
        `
        <li class="li1">
            <p class="title1">
                <a href="">${item.title}</a>
            </p>
            <p class="title2">
                ${item.subtitle}
            </p>
            <p class="curImg">
                <a href="">
                    <img src="${item.imageUrl}" alt="">
                </a>
            </p>
        </li>
        `
 
        )
   
    ) 
}
})
$(function(){
    $.ajax({
        url:"../data/data2.json"
    }).then(function(res){
    render(res.data2);
})
function render(data2){  
    $('[name="ul1"]').html(
       data2.map((item)=>
        `
        <li class="li1">
            <p class="title1">
                <a href="">${item.title}</a>
            </p>
            <p class="title2">
                ${item.subtitle}
            </p>
            <p class="curImg">
                <a href="">
                    <img src="${item.imageUrl}" alt="">
                </a>
            </p>
        </li>
        `
 
        )
   
    ) 
}
})
        $('[name="1"]').click(function(){
                 window.location.href=`./list.html`;
        })
    </script>
    <script>
        new Carousel('#box')
    </script>
</body>

</html>